<template>
	<view v-if="isShow">
		<uni-tag class="defect-state-flag" v-if="defect.defectStateName===PROCESSING" type="error" size="mini" :text="tagText" />
		<uni-tag class="defect-state-flag" v-else-if="defect.defectStateName===AUDIT" type="primary" size="mini" :text="tagText" />
		<uni-tag class="defect-state-flag" v-else-if="defect.defectStateName===RESOLVED" type="success" size="mini" :text="tagText" />
		<uni-tag class="defect-state-flag" v-else-if="defect.defectStateName===REJECTED" type="warning" size="mini" :text="tagText" />
		<uni-tag class="defect-state-flag" v-else-if="defect.defectStateName===CLOSED" size="mini" :text="tagText" />
		<uni-tag class="defect-state-flag" v-else size="mini" :text="$t('unknown')" />
	</view>
</template>

<script>
	import { PROCESSING_STATE, AUDIT_STATE, RESOLVED_STATE, REJECTED_STATE, CLOSE_STATE } from "@/utils/defect.js"
	export default {
		name: 'DefectStateFlag',
		data() {
			return {
				PROCESSING: PROCESSING_STATE,
				AUDIT: AUDIT_STATE,
				RESOLVED: RESOLVED_STATE,
				REJECTED: REJECTED_STATE,
				CLOSED: CLOSE_STATE
			}
		},
		props: {
			defect: {
			  type: Object,
			  default: ()=>{}
			}
		},
		computed: {
			isShow() {
				return this.$i18n.locale?true:false;
			},
			tagText() {
				return this.defect && this.defect.defectStateName ? this.$i18n.t(this.defect.defectStateName) : ''
			}
		},
	}
</script>

<style lang="scss" scoped>
	.defect-state-flag {
		flex-shrink: 0;
	}
</style>